<div id="search-component">
    <h4><label for="search-box">Hero Search</label></h4>
    <!-- (Input)每当用户在文本框中输入时，这个事件绑定就会使用文本框的值（搜索词）调用 search() 函数。 -->
    <!-- searchTerms 变成了一个能发出搜索词的稳定的流。 -->
    <input #searchBox id="search-box" (input)="search(searchBox.value)" />
    
    <ul class="search-result">
        <!-- $ 是一个命名惯例，用来表明 heroes$ 是一个 Observable，而不是数组。 -->
        <!-- 它后面还有一个管道字符（|），后面紧跟着一个 async，它表示 Angular 的 AsyncPipe。 -->
        <!-- AsyncPipe 会自动订阅到 Observable，这样你就不用再在组件类中订阅（subscribes ）了。 -->
        <li *ngFor="let hero of heroes$ | async" >
        <a routerLink="/detail/{{hero.id}}">
            {{hero.name}}
        </a>
        </li>
    </ul>
</div>